<template>
	<div class="m">
		<div class="login_Main">
			<h2 class="notselect">系统管理</h2>
			<div class="login_ipt">
				<div class="lable"><i class="iconfont icon-zhanghu"></i>
					<input class="input_login" autocomplete="off" placeholder="登录账号" v-model="loginForm.username">
					<span class="errorTips"></span>
				</div>

				<div class="lable"><i class="iconfont icon-mima"></i>
					<input class="input_login" autocomplete="off" placeholder="登录密码" v-model="loginForm.password">
					<span class="errorTips"></span>
				</div>
				<div class="lable">
					<u-button type="primary" text="登录" @click="login()" :loading="loginLoading"></u-button>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import {
		loginByUserPwd
	} from 'config/api.js';
	export default {
		data() {
			return {
				loginLoading: false,
				loginForm: {
					username: '江明',
					password: 'Have123',
				}
			}
		},
		computed: {
			...mapState(['hasLogin', 'userInfo']),
		},
		onLoad() {

		},
		methods: {
			...mapMutations(['userLogin']),
			login() {
				if (!this.loginForm.username || !this.loginForm.password) {
					uni.showToast({
						title: '请输入登录账号和密码',
						icon: 'none',
						duration: 2000
					});
					return false
				}
				this.loginLoading = true
				 loginByUserPwd(this.loginForm).then(r => {
					this.loginLoading = false
					this.userLogin(r.data);
					uni.switchTab({
						url: '/pages/index/index'
					})
				}).catch(r => {
					this.loginLoading = false
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.m {
		background-image: url(http://wangluo.me/static/theme/img/login/bg1.jpg) !important;
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center center;
		height: 100vh;
		width: 100vw;
	}

	.login_Main {
		top: 50%;
		left: 50%;
		width: 300px;
		position: absolute;
		margin-top: -250px;
		margin-left: -150px;

		h2 {

			color: #fff;
			padding: 20px 0;
			font-size: 25px;
			text-align: center;
			font-weight: 700;
			letter-spacing: 3px;
			text-shadow: #000 0.05em 0.05em 0.05em;
		}

		.login_ipt {
			.lable {
				margin: 30rpx 0;
				position: relative;

				.iconfont {
					position: absolute;
					top: 14rpx;
					font-size: 30px;
					color: #fff;
					left: 20rpx;
					font-weight: bold;
				}
			}

			.input_login {
				color: #fff;
				height: 45px;
				padding: 0 15px;
				font-size: 14px;
				line-height: 1em;
				text-indent: 35px;
				border: #DDD !important;
				border-radius: 3px;
				letter-spacing: 2px;
				background: rgba(0, 0, 0, .12);
				text-shadow: #000 0.1em 0.1em 0.1em;
				-webkit-text-fill-color: #fff !important;
				box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .3) inset !important;
			}

			.errorTips {
				position: absolute;
				text-align: center;
				color: rgb(204, 68, 68);
				font-size: 12px;
				z-index: 2;
				top: 15px;
				right: 10px;
				padding-top: 0px;
				width: auto;
			}
		}

	}
</style>